<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-show:元素的显示隐藏，取值是一个布尔类型 true:显示 false:隐藏-->
        <h1 v-show="showBoo">这是一个大大的H1</h1>
        <button @click="clickShow">控制v-show</button>

        <!-- v-if:元素的显示隐藏 -->
        <!-- 实现原理：通过创建与删除元素实现显示隐藏 -->
        <h1 v-if="ifBoo">这是一个稳重的H2</h1>
        <button @click="clickIf">控制v-if</button>

        <!-- v-if类似于if、else if、else -->
        <ul>
            <li v-if="age < 18">未成年</li>
            <li v-else-if="age <30">青年</li>
            <li v-else-if="age <60">中年</li>
            <li v-else>老年</li>
        </ul>

        <!-- 区别：v-show适合频繁地切换显示隐藏，v-if适合初始化渲染的显示隐藏-->
    </div>
</body>

</html>
<script src="js/vue3.4.21.js"></script>
<script>
    const {
        createApp,
        ref
    } = Vue

    createApp({
        setup() {

            const showBoo = ref(true)
            const ifBoo = ref(true)
            const age = ref(10)

            function clickShow() {
                showBoo.value = !showBoo.value
            }

            function clickIf() {
                ifBoo.value = !ifBoo.value
            }
            return {
                showBoo,
                clickShow,
                clickIf,
                ifBoo,
                age
            }
        }
    }).mount("#app")
</script>